
import React from 'react'
import store from "./store";
import {Modal,Alert,Form,Transfer,Message} from 'antd'
import {observer} from 'mobx-react'
import {Assignment} from "../../../api/system/account/UserApi";

@observer
class RoleForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loading:false
        }
    }

    componentDidMount() {
        store.initRoles();
    }

    handleSubmit = () => {
        Assignment({id:store.record.id,selected:store.hasRoles}).then(response => {
            if (response.data.code === 200){
                store.record = {};
                store.roleFormVisible = false;
                store.allRoles = [];
                store.hasRoles = [];
                Message.success(response.data.msg);
            }
        });

    };

    render() {
        return (
            <Modal
                visible
                width={800}
                maskClosable={true}
                title="分配角色"
                onCancel={() => store.roleFormVisible = false}
                confirmLoading={this.state.loading}
                onOk={this.handleSubmit}>
                <Alert
                    closable
                    showIcon
                    type="info"
                    message="小提示"
                    style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
                    description="为用户配置对应角色，用户将拥有角色所分配的权限"/>
                <Form.Item label="为用户分配权限" style={{padding: '0 20px'}}>
                    <Transfer
                        showSearch
                        listStyle={{width: 325, maxHeight: 500, minHeight: 300}}
                        titles={['未拥有的角色', '已拥有的角色']}
                        dataSource={store.allRoles}
                        targetKeys={store.hasRoles}
                        onChange={keys => store.hasRoles = keys}
                        //filterOption={(inputValue, option) => `${option.zone}${option.name}`.toLowerCase().indexOf(inputValue.toLowerCase()) > -1}
                        render={item => `${item.name}`}/>
                </Form.Item>
            </Modal>
        );
    }
}

export default RoleForm;
